<!-- 自定义分组 -->
<template>
    <view>
       <!-- <status-bar title='自定义组类' :goHome='fromShare'></status-bar> -->
        <view class="item padding30 d-flex j-sb a-center" v-for="(item,index) in list" :key="index">
            <view class="flex-1">
                <view class="size34 color_44 bold800 m-bot20 ellipsis">{{ item.name }}</view>
                <view class="h6 color_77 ellipsis">{{ item.remark }}</view>
            </view>
            <view>
                <text class="size34 color_22 bold800 m-left30">{{ item.member }}人</text>
                <text class="iconfont icon-bianji size38 m-left30 m-right30" style="color: #3883FF;" @click="handleEdit(item)"></text>
                <text class="iconfont icon-shanchu size36" style="color: #FF4B38;" @click="handleDel(item)"></text>
            </view>
        </view>
        <view class="p-top60 flexac">
            <view class="addBtn text-center white" @click="handleAdd">
                <text class="iconfont icon-zengjia m-right10"></text>
                <text class="size28">添加个性分类</text>
            </view>
        </view>
        <!-- 添加/编辑分组弹窗 -->
        <u-popup :show="showPopup" :round="10" @close="showPopup = false">
            <view class="d-flex f-column j-sb">
                <view class="p-top30 p-bot80 p-left70 p-right70 flex-1">
                    <view class="size32 color_22 bold m-bot50 text-center">{{ isAdd ? '添加' : '编辑' }}自定义分组</view>
                    <u--input v-model="value1" placeholder="请输入个性分类名" :customStyle="{'margin-bottom': '40rpx'}"></u--input>
                    <u--input v-model="value2" placeholder="请输入备注"></u--input>
                </view>
                <view class="d-flex">
                    <view class="btn bgwhite text-center size28" @click="showPopup = false">取消</view>
                    <view class="btn text-center size28 white" @click="handleConfirm">确定</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data(){
        return {
            fromShare: 0,
            showPopup: false,
            isAdd: true,
            value1: '', // 个性分类名
            value2: '', // 备注
            list: [],
            group_id: ''
        }
    },
    created(){
        this.getList()
    },
    methods: {
        getList(){
            this.$http.get({
                url: '/PrivateSphereApi/GuestGroupList'
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.list = res.data || []
            })
        },
        handleAdd(){
            this.isAdd = true
            this.value1 = ''
            this.value2 = ''
            this.showPopup = true
        },
        handleEdit(item){
            this.isAdd = false
            this.value1 = item.name
            this.value2 = item.remark
            this.group_id = item.group_id
            this.showPopup = true
        },
        handleDel({group_id}){
            this.$Modal('提示', '确定删除所选分组吗？').then(res=>{
                if(!res) return
                this.$http.post({
                    url: '/PrivateSphereApi/delGuestGroup',
                    data: {
                        id: group_id
                    }
                }).then(res=>{
                    if(res.code != 200) return this.$Toast(res.msg)
                    this.getList()
                })
            })
        },
        handleConfirm(){
            let params = {
                name: this.value1,
                remark: this.value2
            }
            if(!this.isAdd){ // 编辑
                params.id = this.group_id
            }

            this.$http.post({
                url: '/PrivateSphereApi/editGuestGroup',
                data: params
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.showPopup = false
                this.getList()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.item {
    border-bottom: 1rpx solid #D9D9D9;
}
.addBtn {
    width: 300rpx;
    line-height: 90rpx; 
    background: #389EFF;
    border-radius: 16rpx;
    .icon-zengjia {
        vertical-align: bottom;
    }
}
.btn {
    width: 50%;
    line-height: 90rpx;
    &:first-child {    
        border: 1px solid #65A3FF; 
        border-radius: 26rpx 0rpx 0rpx 0rpx;  
        color: #65A3FF;
    }
    &:last-child { 
        background: #65A3FF;
        border-radius: 0rpx 26rpx 0rpx 0rpx;
    }
}
</style>